<template>
    <div class="my_order">
        <div class="title">{{ $t('my.我的订单') }}</div>
        <div class="tabs">
            <div class="item" :class="active == 'buy' ? 'active' : ''" @click="changeType('buy')">
                {{ $t('my.我购买的') }}
            </div>
            <div class="item" :class="active == 'sell' ? 'active' : ''" @click="changeType('sell')">
                {{ $t('my.我出售的') }}
            </div>
        </div>

        <div class="el_tabs">
            <el-tabs v-model="tabs" @tab-click="changeTabs">
                <el-tab-pane :label="$t('my.全部')" name="all"></el-tab-pane>
                <el-tab-pane :label="$t('my.待发货')" name="1"></el-tab-pane>
                <el-tab-pane :label="$t('my.待收货')" name="2"></el-tab-pane>
                <el-tab-pane :label="$t('my.已完成')" name="3"></el-tab-pane>
                <!-- <el-tab-pane label="待发货"></el-tab-pane>
                <el-tab-pane label="待收货"></el-tab-pane>
                <el-tab-pane label="已完成"></el-tab-pane> -->
            </el-tabs>
        </div>

        <div class="table">
            <el-table :data="tableData" height="585" header-row-class-name="table_header_row"
                header-cell-class-name="table_header_cell" row-class-name="table_row" cell-class-name="table_cell">
                <el-table-column prop="date" :label="$t('my.订单详情')" width="110">
                    <div class="order_deta">
                        <img src="@/assets/image/bg1.png" alt="" class="cover">
                        <!-- <div>
                        <div>商品名称:10086</div>
                        <div>订单号:10086</div>
                        <div>订单号:10086</div> 
                    </div> -->
                    </div>

                    <template slot-scope="{row}">
                        <img :src="row.images[0] || ''" alt="" class="cover">
                    </template>


                </el-table-column>
                <el-table-column prop="goods_name" :label="$t('mall.商品名称')" align="center"
                    width="180"></el-table-column>
                <el-table-column prop="order_sn" :label="$t('my.订单号')" align="center" width="200"></el-table-column>
                <el-table-column prop="createtime" :label="$t('my.下单时间')" align="center" width="180"></el-table-column>

                <el-table-column prop="name" :label="$t('my.单价')" align="center" width="80">
                    <template slot-scope="{row}">
                        <div>￥{{ row.pay_amount }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="quantity" :label="$t('mall.数量')" align="center" width="80">
                </el-table-column>
                <el-table-column prop="pay_amount" :label="$t('my.总金额')" align="center" width="80">
                </el-table-column>
                <el-table-column prop="shop_name" :label="$t('my.商铺名称')" align="center" width="120">
                </el-table-column>
                <el-table-column :label="$t('my.订单状态')" align="center" width="120">
                    <template slot-scope="{row}">
                        <div class="status_view">
                            <div class="status">{{ row.status_text }}</div>
                            <div class="status complete" @click="show_dialog(row, 'deta')">{{ $t('my.订单详情') }}</div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" align="right" width="200" :label="$t('table.操作')">
                    <template slot-scope="{row}">
                        <div class="oper_view">
                            <el-button round v-if="row.is_refund == 1" @click="show_dialog(row, 'refunding')">
                                {{ $t('my.退款中') }}
                            </el-button>
                            <el-button round type="warning" @click="show_dialog(row, 'refund')"
                                v-if="row.is_refund != 1 && (row.status == 1 || row.status == 2) && active == 'buy'">
                                {{ $t('my.申请退款') }}
                            </el-button>
                            <el-button round type="danger" @click="cancelOrder(row)"
                                v-if="row.status == 1 && active == 'buy'">
                                {{ $t('my.取消订单') }}
                            </el-button>
                            <el-button round @click="shipment(row)" v-if="row.status == 1 && active == 'sell'">
                                {{ $t('my.确认发货') }}
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_view">
            <el-pagination background layout="prev, pager, next" :current-page="page" :total="total"
                @current-change="change" />
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" top="50px" width="530px" :modal="true"
            :center="true" :show-close="false" append-to-body>
            <Refund :order_sn="order_sn" @ok="dialog_ok" @close="dialogVisible = false" v-if="type == 'refund'" />
            <RefundDeta :order_id="order_id" v-else-if="type == 'refunding'" />
            <OrderDeta :order_sn="order_sn" v-else />
        </el-dialog>
    </div>
</template>

<script>
import Refund from "@/components/my/Refund.vue"
import RefundDeta from "@/components/my/RefundDeta.vue"
import OrderDeta from "@/components/my/OrderDeta.vue"

export default {
    components: {
        Refund,
        RefundDeta,
        OrderDeta
    },
    data() {
        return {
            active: "buy",
            tabs: "all",

            dialogTitle: "",
            dialogVisible: false,

            type: "",

            order_sn: '',
            order_id: '',
            page: 1,
            tableData: [],
            total: 0
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            let { list: res } = await this.$api.shopApi.orderList({
                buy_type: this.active,
                status: this.tabs,
                page: this.page,
                page_size: 10
            });
            this.total = res.total;
            this.tableData = res.data;
        },
        change(value) {
            this.page = value;
            this.getList();
        },
        changeType(value) {
            this.active = value;
            this.page = 1;
            this.getList();
        },
        changeTabs() {
            this.page = 1;
            this.getList();
        },
        dialog_ok() {
            this.dialogVisible = false;
            this.page = 1;
            this.getList();
        },

        async confirmShipment(row) {
            let order_id = row.id;
            await this.$api.shopApi.confirmShipment({
                order_id
            });
            this.$message({
                type: "success",
                message: this.$t('msg.操作成功')
            });
            this.page = 1;
            this.getList()
        },
        shipment(row) {
            this.$confirm(this.$t('my.确认发货吗'), this.$t('msg.提示'), {
                confirmButtonText: this.$t('msg.确定'),
                cancelButtonText: this.$t('msg.取消'),
                type: 'warning'
            }).then(() => {
                this.confirmShipment(row);
            }).catch(() => { });
        },

        async confirmCancelOrder(row) {
            let order_id = row.id;
            await this.$api.shopApi.cancelOrder({
                order_id
            });
            this.$message({
                type: "success",
                message: this.$t('msg.操作成功')
            });
            this.page = 1;
            this.getList()
        },
        cancelOrder(row) {
            this.$confirm(this.$t('my.确定要取消订单吗'), this.$t('msg.提示'), {
                confirmButtonText: this.$t('msg.确定'),
                cancelButtonText: this.$t('msg.取消'),
                type: 'warning'
            }).then(() => {
                this.confirmCancelOrder(row);
            }).catch(() => { });
        },


        // 'refundDeta', refund
        show_dialog(item, type) {
            if (type == 'refund') {
                this.order_sn = item.order_sn;
                this.dialogTitle = this.$t('my.申请退款')
            }
            if (type == 'refunding') {
                this.order_id = item.id;
                this.dialogTitle = this.$t('mall.退款进度')
            }
            if (type == 'deta') {
                this.order_sn = item.order_sn;
                this.dialogTitle = this.$t('my.订单详情')
            }

            this.type = type;
            this.dialogVisible = true;
        }
    }
}
</script>
<style lang="scss" scoped>
.my_order {
    min-width: 100%;
    min-height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 24px;
    box-sizing: border-box;
    background: #FCFCFE;
    display: flex;
    flex-direction: column;
    // overflow: hidden;

    .title {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        padding-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }

    .tabs {
        display: flex;

        .item {
            height: 45px;
            line-height: 45px;
            text-align: center;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 18px;
            margin-right: 36px;
            padding: 0 10px;
            box-sizing: border-box;
            background: rgba(34, 115, 255, 0.5);
            border-radius: 8px 8px 8px 8px;
            cursor: pointer;

            &.active {
                background: #2273FF;
            }
        }
    }

    .el_tabs {
        padding: 16px 0;

        :deep(.el-tabs__item) {
            font-size: 18px;
        }
    }

    .table {
        // flex: 1;
        // height: calc(100vh - 50px - 48px - 42px - 45px - 86px - 32px);

        width: calc(100vw - 162px - 314px - 48px - 48px);

        // height: calc(100vh - 50px - 18px - 48px - 86px - 42px - 45px);
        &:deep(.el-table) {
            height: 100%;
        }

        .cover {
            width: 102px;
            height: 102px;
        }

        .status_view {
            cursor: default;

            .status {
                font-size: 14px;
                color: #FF9718;

                &.complete {
                    color: #2273FF;

                }
            }
        }

        .oper_view {
            display: flex;
            flex-direction: column;
            justify-content: center;

            :deep(.el-button) {
                margin: 6px;
            }
        }
    }
}
</style>

<style lang="scss">
.my_order {
    .el-table {
        .table_header_row {
            height: 48px;
            background: #F0F3F6;
        }

        .table_header_cell {
            height: 40px;
            text-align: center;
            font-size: 14px;
            color: #333333;
            background: #F0F3F6;
        }

        .table_cell {
            height: 44px;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }
    }
}

.order_popover {
    width: 284px;
    padding: 12px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;

    .order_input {
        width: 240px;
        height: 108px;
        border-bottom: 1px solid #EDEDED;
        display: flex;
        align-items: center;

        input {
            text-align: center;
            font-size: 18px;
            color: #333333;
            border: none;
            outline: none;
        }
    }

    .el_button {
        width: 113px;
        height: 32px;
        margin-top: 16px;
    }
}
</style>